<template>
  <div class="edit-table">
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
      bordered
      size="middle"
      row-key="key"
      v-if="dataSource.length"
    >
      <!-- 变量名列 -->
      <template slot="name" slot-scope="text, record, index">
        <a-input
          v-if="!record.isInitial"
          v-model="record.name"
          placeholder="请输入变量名"
          @change="handleChange(index, 'name', $event.target.value)"
        />
        <span v-else class="readonly-text">{{ record.name }}</span>
      </template>

      <!-- 数值列 -->
      <template slot="datatype" slot-scope="text, record, index">
        <a-input
          v-if="!record.isInitial"
          v-model="record.datatype"
          placeholder="请选择数据类型"
          @change="handleChange(index, 'datatype', $event.target.value)"
        />
        <span v-else class="readonly-text">{{ record.datatype }}</span>
      </template>

      <!-- 类型描述列 -->
      <template slot="description" slot-scope="text, record, index">
        <a-input
          v-if="!record.isInitial"
          v-model="record.description"
          placeholder="请输入描述"
          @change="handleChange(index, 'description', $event.target.value)"
        />
        <span v-else class="readonly-text">{{ record.description }}</span>
      </template>

      <!-- 操作列 -->
      <template slot="action" slot-scope="text, record, index">
        <a-space>
          <a-button
            v-if="!record.isInitial"
            type="link"
            size="small"
            danger
            @click="removeRow(index)"
            icon="delete"
            :disabled="dataSource.length === 1"
          >
            删除
          </a-button>
        </a-space>
      </template>
    </a-table>

    <!-- 底部操作按钮 -->
    <div class="table-actions">
      <a-button type="dashed" @click="addRow()" icon="plus" block> 添加一行 </a-button>
    </div>

    <!-- 数据预览 -->
    <div class="data-preview" v-if="showPreview">
      <h4>数据预览：</h4>
      <pre>{{ JSON.stringify(tableData, null, 2) }}</pre>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EditTable',
  props: {
    // 初始数据
    value: {
      type: Array,
      default: () => [],
    },
    // 是否显示数据预览
    showPreview: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 表格列配置
      columns: [
        {
          title: '变量名',
          dataIndex: 'name',
          key: 'name',
          width: '25%',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '数值',
          dataIndex: 'datatype',
          key: 'datatype',
          width: '20%',
          scopedSlots: { customRender: 'datatype' },
        },
        {
          title: '类型描述',
          dataIndex: 'description',
          key: 'description',
          width: '35%',
          scopedSlots: { customRender: 'description' },
        },
        {
          title: '操作',
          key: 'action',
          width: '20%',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 表格数据
      dataSource: [],
      // 内部状态标记，用于避免循环调用
      isInternalUpdate: false,
      // 记录初始数据的数量
      initialDataCount: 0,
    }
  },
  computed: {
    // 计算表格数据，用于向外传递（只返回可编辑的数据）
    tableData() {
      return this.dataSource
        .filter((item) => !item.isInitial)
        .map((item) => ({
          datatype: item.datatype,
          name: item.name,
          description: item.description,
        }))
    },
    // 获取所有数据（包括初始数据和新增数据）
    allTableData() {
      return this.dataSource.map((item) => ({
        datatype: item.datatype,
        name: item.name,
        description: item.description,
        isInitial: item.isInitial || false,
      }))
    },
  },
  watch: {
    // 监听外部传入的数据变化
    value: {
      handler(newVal) {
        // 避免在内部更新时重复初始化
        if (!this.isInternalUpdate) {
          this.initData(newVal)
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 初始化数据
    initData(data) {
      if (data && data.length > 0) {
        // 标记初始数据
        this.initialDataCount = data.length
        this.dataSource = data.map((item, index) => ({
          key: index,
          datatype: item.datatype || '',
          name: item.name || '',
          description: item.description || '',
          isInitial: item.isInitial || true, // 标记为初始数据
        }))
      } else {
        this.dataSource = []
      }
    },

    // 创建空行数据
    createEmptyRow(index) {
      return {
        key: index,
        datatype: '',
        name: '',
        description: '',
        isInitial: false, // 新增的数据可编辑
      }
    },

    // 处理数据变化
    handleChange(index, field, value) {
      // 只允许编辑非初始数据
      if (!this.dataSource[index].isInitial) {
        this.$set(this.dataSource[index], field, value)
        // 触发数据更新
        this.triggerChange()
      }
    },

    // 添加行
    addRow(index) {
      const newIndex = index !== undefined ? index + 1 : this.dataSource.length
      const newRow = this.createEmptyRow(Date.now()) // 使用时间戳作为唯一key
      this.dataSource.splice(newIndex, 0, newRow)
      this.updateKeys()
      // 触发数据更新
      this.triggerChange()
    },

    // 删除行
    removeRow(index) {
      const row = this.dataSource[index]

      // 只允许删除非初始数据
      if (row.isInitial) {
        this.$message.warning('初始数据不可删除')
        return
      }

      this.dataSource.splice(index, 1)
      this.updateKeys()
      // 触发数据更新
      this.triggerChange()
    },

    // 更新所有行的key
    updateKeys() {
      this.dataSource.forEach((item, index) => {
        item.key = index
      })
    },

    // 触发数据变化事件（避免循环调用）
    triggerChange() {
      this.isInternalUpdate = true
      const currentData = this.tableData

      // 使用 $nextTick 确保在下一个事件循环中执行
      this.$nextTick(() => {
        this.$emit('input', currentData)
        this.$emit('change', currentData)
        // 同时触发包含所有数据的事件
        this.$emit('all-data-change', this.allTableData)

        // 重置内部更新标记
        this.$nextTick(() => {
          this.isInternalUpdate = false
        })
      })
    },

    // 验证数据
    validate() {
      const errors = []
      this.dataSource.forEach((item, index) => {
        if (!item.isInitial) {
          // 只验证可编辑的数据
          if (!item.name) {
            errors.push(`第${index + 1}行：变量名不能为空`)
          }
          if (!item.datatype) {
            errors.push(`第${index + 1}行：数据类型不能为空`)
          }
        }
      })

      if (errors.length > 0) {
        this.$message.error(errors.join('；'))
        return false
      }
      return true
    },

    // 获取表格数据（只返回可编辑的数据）
    getData() {
      return this.tableData
    },

    // 获取所有数据（包括初始数据）
    getAllData() {
      return this.allTableData
    },

    // 清空表格（只清空可编辑数据）
    clear() {
      // 保留初始数据，只清空新增的数据
      this.dataSource = this.dataSource.filter((item) => item.isInitial)
      // 如果没有可编辑数据，添加一行空数据
      if (this.dataSource.filter((item) => !item.isInitial).length === 0) {
        this.dataSource.push(this.createEmptyRow(Date.now()))
      }
      this.updateKeys()
      this.triggerChange()
    },
  },
}
</script>

<style lang="less" scoped>
.edit-table {
  .table-actions {
    margin-top: 16px;
  }

  .data-preview {
    margin-top: 16px;
    padding: 16px;
    background-color: #f5f5f5;
    border-radius: 4px;

    h4 {
      margin-bottom: 8px;
      color: #666;
    }

    pre {
      margin: 0;
      font-size: 12px;
      color: #333;
    }
  }

  // 只读文本样式
  .readonly-text {
    color: #666;
    padding: 4px 8px;
    display: inline-block;
    min-height: 32px;
    line-height: 24px;
    background-color: #f5f5f5;
    border-radius: 4px;
    width: 100%;
  }

  .readonly-action {
    color: #999;
    font-size: 12px;
  }

  // 表格内输入框样式优化
  :deep(.ant-table-tbody) {
    .ant-input {
      border: none;
      box-shadow: none;
      padding: 4px 8px;

      &:focus {
        border-color: #1890ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
      }
    }

    .ant-select {
      .ant-select-selector {
        border: none;
        box-shadow: none;
      }

      &.ant-select-focused .ant-select-selector {
        border-color: #1890ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
      }
    }

    // 初始数据行的样式
    tr:has(.readonly-text) {
      background-color: #fafafa;
    }
  }
}
</style>
